<script type="text/javascript" src="install/templates/js/setup.js"></script>
<script type="text/javascript" src="install/templates/js/form-validation.js"></script>
<h2>{$installForm}</h2>

{if isset($smarty.session.errors) && !empty($smarty.session.errors)}
    <div class="error">
        {$encounteredFollowingErrors}
        <ul>
            {foreach $smarty.session.errors as $error}
                <li>{$error}</li>
            {/foreach}
        </ul>
    </div>
{/if}

{if isset($smarty.session.installForm)}
    {$form = $smarty.session.installForm}
{else}
    {$form = [
        'language'        => $language,
        'driver'          => 'PoSQL',
        'dbServer'        => 'localhost',
        'dbUser'          => '',
        'dbName'          => 'database',
        'timezone'        => $timezone,
        'imageQuality'    => '80',
        'imageBackground' => '#FFFFFF'
    ]}
{/if}

<form action="" method="post" onsubmit="return validate(this);">
    <table>
        <colgroup>
            <col width="210" />
            <col width="210" />
        </colgroup>
        <tr>
            <td><label for="language">{$prefferdLanguage}</label></td>
            <td>
                <select name="language" id="language">
                    <option value="">{$autodetect}</option>
                    {foreach from=$languages item=lang}
                        <option value="{$lang}"{if $lang == $form.language} selected=""{/if}>{$lang}</option>
                    {/foreach}
                </select>
            </td>
        </tr>
        <tr>
            <td><label for="adminpass">{$adminPassword}</label></td>
            <td><input type="password" name="adminpass" id="adminpass" /></td>
        </tr>
        </tr>
        <tr>
            <td><label for="adminpass2">{$adminPassword2}</label></td>
            <td><input type="password" name="adminpass2" id="adminpass2" /></td>
        </tr>
    </table>
    
    <p>
        <a href="#" onclick="var expert = document.getElementById('expert').style; this.innerHTML = expert.display ? '{$clickToHideExpertMode|escape:'javascript'}' : '{$clickForExpertMode|escape:'javascript'}'; expert.display = expert.display ? '' : 'none'; return false;">{$clickForExpertMode}</a>
    </p>

    <table id="expert" style="display: none">
        <colgroup>
            <col width="210" />
            <col width="210" />
        </colgroup>
        <tr>
            <td><label for="driver">{$databaseDriver}</label></td>
            <td>
                <select name="driver" id="driver">
                    <option value="PoSQL"{if $form.driver == 'PoSQL'} selected=""{/if}>PoSQL</option>
                    {if class_exists('mysqli')}
                    <option value="MySQLi"{if $form.driver == 'MySQLi'} selected=""{/if}>MySQLi</option>
                    {/if}
                    {if function_exists('mysql_connect')}
                    <option value="MySQL"{if $form.driver == 'MySQL'} selected=""{/if}>MySQL</option>
                    {/if}
                </select>
            </td>
        </tr>
        <tr id="dbServerRow" style="display: none">
            <td><label for="dbServer">{$databaseServer}</label></td>
            <td><input type="text" name="dbServer" id="dbServer" value="{$form.dbServer}" /></td>
        </tr>
        <tr id="dbUserRow" style="display: none">
            <td><label for="dbUser">{$databaseUser}</label></td>
            <td><input type="text" name="dbUser" id="dbUser" value="{$form.dbUser}" /></td>
        </tr>
        <tr id="dbPasswordRow" style="display: none">
            <td><label for="dbPassword">{$databasePassword}</label></td>
            <td><input type="password" name="dbPassword" id="dbPassword" /></td>
        </tr>
        <tr>
            <td><label for="dbName">{$databaseName}</label></td>
            <td><input type="text" name="dbName" id="dbName" value="{$form.dbName}" /></td>
        </tr>
        <tr>
            <td><label for="timezone">{$timeZone}</label></td>
            <td><input type="text" name="timezone" value="{$form.timezone}" id="timezone" /></td>
        </tr>
        <tr>
            <td><label for="imageQuality">{$imageQuality}</label></td>
            <td><input type="text" name="imageQuality" value="{$form.imageQuality}" id="imageQuality" /></td>
        </tr>
        <tr>
            <td><label for="imageBackground">{$imageBackground}</label></td>
            <td>
                <input type="text" name="imageBackground" id="imageBackground" value="{$form.imageBackground}" class="{literal}color {hash:true}{/literal}" />
            </td>
        </tr>
    </table>
    
    <table>
        <tr>
            <td>
                <input type="submit" value="{$installSystem}" />
            </td>
        </tr>
    </table>
</form>